<template>
  <div class="timer">
    <div v-if="showSeconds" style="color: #333333;font-size: 20px;" >{{ innerHTMLSeconds}}</div>
    <div v-else style="color: #333333;font-size: 20px;" >{{ innerHTML}}</div>
  </div>
</template>

<script>
export default {
  name:'Timer',
  props:{
    time:{
      type:Number,
      default:0
    },
    showSeconds:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      html_hour:0,
      html_minutes:0,
      html_seconds:0,
      timer: '',
      hour: 0,
      minutes: 0,
      seconds: 0,
      cr: '',
      innerHTML:'',
      innerHTMLSeconds:'',
    }
  },
  created() {
    this.seconds=this.time
    this.timer = setInterval(this.startTimer, 1000)
    this.formatTime(this.seconds)
  },
  methods: {
    formatTime(seconds){
      if(seconds>=60){
        this.minutes=parseInt(seconds/60)
        this.seconds=seconds%60
        if(this.minutes>=60){
          this.hour=parseInt(this.minutes/60)
          this.minutes=this.minutes%60
        }
      }
    },
    startTimer() {
      this.seconds += 1
      if (this.seconds >= 60) {
        this.seconds = 0
        this.minutes = this.minutes + 1
      }

      if (this.minutes >= 60) {
        this.minutes = 0
        this.hour = this.hour + 1
      }
      this.innerHTMLSeconds = (this.hour < 10 ? '0' + this.hour: this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes: this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds: this.seconds)
      this.innerHTML = (this.hour < 10 ? '0' + this.hour: this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes: this.minutes)
      this.cr = this.seconds
    },
    stop () {
      clearInterval(this.timer)
    },
    start () {
      this.timer = setInterval(this.startTimer, 1000)
    }
  }
}
</script>


<style scoped>

</style>